<template id="sysPosition">
  <div>
    <!--搜索框-->
    <el-form :inline="true" :model="searchForm">
      <el-form-item>
        <el-button
          type="primary"
          @click="addHandle"
          v-if="hasAuth('sys:position:add')"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      :data="tableData"
      style="margin-bottom: 20px"
      :max-height="tableHeight"
    >
      <el-table-column prop="name" label="名称" width="150"> </el-table-column>
      <el-table-column prop="level" label="职位等级" width="150"> </el-table-column>
      <el-table-column prop="parentLevel" label="上级等级" width="150"> </el-table-column>
      <el-table-column
        label="操作"
        width="120"
        v-if="hasAuth('sys:position:edit') || hasAuth('sys:position:del')"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="editHandle(scope.row.id)"
            v-if="hasAuth('sys:position:edit')"
            >编辑</el-button
          >
          <el-divider
            direction="vertical"
            v-if="hasAuth('sys:position:edit') && hasAuth('sys:position:del')"
          ></el-divider>
          <el-popconfirm
            title="确定要删除这条记录吗？"
            @confirm="delHandle(scope.row.id)"
            v-if="hasAuth('sys:position:del')"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="editFormTitle"
      :visible.sync="dialogFormVisible"
      width="600px"
      @closed="resetForm('editForm')"
    >
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item label="上级等级" prop="parentLevel" label-width="100px">
          <el-select
            v-model="editForm.parentLevel"
          >
            <el-option :label="0" :value="0"> </el-option>
            <el-option
              v-for="level in levelList"
              :label="level"
              :value="level"
              :key="level"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位名称" prop="name" label-width="100px">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditForm('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template><script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Position",
  components: { Treeselect },
  data() {
    return {      
      tableHeight: 600,
      searchForm: { name: "" },
      tableData: [],
      treeSelect: [],
      multipleSelection: [],
      dialogFormVisible: false,
      levelList: [],
      editForm: {},
      editFormTitle: "",
      editFormRules: {
        parentLevel: [
          { required: true, message: "请选择上级等级", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    getPositionList() {
      this.$axios
        .get("/position/list", { params: { name: this.searchForm.name } })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "/position/" + (this.editForm.id ? "update" : "save"),
              this.editForm
            )
            .then((res) => {
              this.resetForm(formName);
              this.$message({
                showClose: true,
                message: res.data.message,
                type: "success",
                onClose:()=>{
                  this.getPositionList()
                }
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addHandle() {
      this.editFormTitle = "新增职位";      
      this.$axios.get("/position/level").then((res) => {
        this.levelList = res.data.data;
      });
      this.dialogFormVisible = true;
    },
    editHandle(id) {
      this.editFormTitle = "编辑职位";
      this.$axios.get("/position/level").then((res) => {
        this.levelList = res.data.data;
      });
      this.$axios.get("/position/info/" + id).then((res) => {
        this.editForm = res.data.data;
        this.dialogFormVisible = true;
      });
    },
    delHandle(id) {
      this.$axios.post("/position/delete/" + id).then((res) => {
        this.$message({
          showClose: true,
          message: res.data.message,
          type: "success",
          onClose: () => {
            this.getPositionList();
          },
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
  },
  created() {
    this.getPositionList();
  },
};
</script>
<style scoped>
</style>